<template>
  <div :style="{ width: width + 'px', height: height + 'px', overflowY: 'auto' }" ref="container" style="text-align: center; position: relative;">
    <div style="color: #2CC2EF; font-size: 20px">{{ this.$store.state.currentClientInfo.name }}</div>
    <div v-if="this.$store.state.currentClientInfo.pointMap" style="display: flex; flex-wrap: wrap; justify-content: center;">
      <div v-if="this.$store.state.currentClientInfo.pointMap.length > 0" v-for="item in this.$store.state.currentClientInfo.pointMap" :key="item" style="margin: 5px">
        <img :src="item" alt="" style="width: 100px; height: 100px; cursor: pointer;" @click="openModal(item)">
      </div>
      <div v-else style="color: #2CC2EF; font-size: 20px">
        无数据
      </div>
    </div>
    <div v-else style="color: #2CC2EF; font-size: 20px">
      点击联网单位列表获取数据
    </div>

    <div v-if="isModalOpen" class="modal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <!-- Close button -->
        <button class="close-btn" @click="closeModal">X</button>
        <img :src="currentImage" alt="" class="enlarged-image" :style="{ transform: 'scale(' + zoomLevel + ')'}" @wheel="handleZoom">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pointMapImg",
  props: {
    width: Number,
    height: Number
  },
  data() {
    return {
      isModalOpen: false,
      currentImage: '',
      zoomLevel: 1,  // Initial zoom level
    };
  },
  methods: {
    openModal(image) {
      this.currentImage = image;
      this.isModalOpen = true;

    },
    closeModal() {
      this.isModalOpen = false;
      this.currentImage = '';
      this.zoomLevel = 1;  // Reset zoom level when opening modal
    },
    handleZoom(event) {
      event.preventDefault(); // 防止页面滚动

      // 根据滚轮方向调整缩放级别
      if (event.deltaY < 0) {
        this.zoomLevel = Math.min(this.zoomLevel + 0.1, 3); // 最大缩放到3倍
      } else {
        this.zoomLevel = Math.max(this.zoomLevel - 0.1, 1); // 最小缩放到1倍
      }
    },
  }
}
</script>

<style scoped>
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 使用视口宽度 */
    height: 100vh; /* 使用视口高度 */
    background-color: rgba(0, 0, 0, 0.9); /* 更深的半透明背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9000; /* 确保弹窗在最上层 */
  }

  .modal-content {
    position: relative; /* 相对定位，用于定位关闭按钮 */
    width: 100%; /* 弹窗内容宽度为100% */
    height: 100%; /* 弹窗内容高度为100% */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .close-btn {
    z-index: 9999;
    position: absolute;
    top: 20px; /* 离顶部距离 */
    right: 20px; /* 离右侧距离 */
    background-color: transparent; /* 背景透明 */
    border: none;
    font-size: 24px; /* 字体大小 */
    cursor: pointer;
    color: red; /* 关闭按钮颜色 */
  }

  .close-btn:hover {
    color: red; /* 鼠标悬停时颜色变化 */
  }

  .enlarged-image {
    max-width: 100%; /* 确保图片不会超出弹窗边界 */
    max-height: 100%; /* 确保图片不会超出弹窗边界 */
    border-radius: 0; /* 去掉图片的圆角 */
    transition: transform 0.3s ease; /* 变换过渡效果 */
  }
</style>
